<template>
  <view class="login">
    <view class="title"> 智慧社区 </view>
    <view class="main">
      <up-form labelPosition="left" :model="form" :rules="rules" ref="formRef">
        <up-form-item
          class="formItem"
          label="手机号"
          prop="phone"
          :borderBottom="true"
          leftIconStyle="color:'#ffffff'"
          :required="true"
          labelWidth="150rpx"
        >
          <up-input v-model="form.phone" placeholder="输入手机号"></up-input>
        </up-form-item>
        <up-form-item label="密码" prop="password" :required="true" labelWidth="150rpx">
          <up-input v-model="form.password" placeholder="输入密码"></up-input>
        </up-form-item>
      </up-form>

      <up-button type="primary" text="立即登录" @click="submit()"></up-button>
    </view>
    <view class="floot">
      <text>忘记密码</text>
      <text>|</text>
      <text @click="goRegister()">立即注册</text>
    </view>
    <view class="btmImg">
      <image
        src="https://cdn7.axureshop.com/demo/1996612/images/%E7%99%BB%E5%BD%95/u269.png"
        mode=""
      ></image>
    </view>
  </view>
</template>

<script setup>
import { login } from "../../api/login.js";
import { ref } from "vue";
let formRef = ref();
let form = ref({
  phone: "18888888888",
  password: "123456",
});
let rules = {
  phone: [
    {
      require: true,
      type: "string",
      message: "请输入手机号",
      validator: (rule, value, callback) => {
        if (value) {
          return true;
        } else {
          return callback("请输入手机号");
        }
      },
      trigger: ["blur"],
    },
    {
      // 	// 自定义验证函数，见上说明
      validator: (rule, value, callback) => {
        // 上面有说，返回true表示校验通过，返回false表示不通过
        // uni.$u.test.mobile()就是返回true或者false的
        return uni.$u.test.mobile(value);
      },
      message: "手机号码不正确",
      // 	// 触发器可以同时用blur和change
      trigger: ["blur"],
    },
  ],
  password: {
    type: "string",
    // message: '请输入3到8位密码',
    trigger: ["blur"],
    validator: (rule, value, callback) => {
      if (!value) {
        return callback("请输入密码");
      }
      if (value.length < 3 || value.length > 8) {
        return callback("密码在3到8位字符");
      }
      callback();
    },
  },
};

function submit() {
  // console.log(formRef);
  formRef.value
    .validate()
    .then((val) => {
      login(form.value)
        .then((res) => {
          console.log(res);
          // 存储token
          if (res.status == 200) {
			localStorage.setItem("token", res.data.token);
			uni.switchTab({
              url: "/pages/navBer/home/home",
            });
          } else {
			console.log("登录失败");
            uni.showToast({
              title: res.data.message,
              icon: "none",
            });
       
          }
        })
        .catch((err) => {
          console.log(err);
        });

    })
    .catch((err) => {
      console.log(err);
    });
}
function goRegister() {
  uni.navigateTo({
    url: "/pages/login/register",
  });
}
</script>

<style lang="scss">
.login {
  height: 100vh;
  background-image: url("https://cdn7.axureshop.com/demo/1996612/images/%E7%99%BB%E5%BD%95/u257.svg");
  background-size: cover;
  padding: 0 80rpx;
  overflow: hidden;

  .title {
    font-size: 60rpx;
    color: #ffffff;
    // font-kerning: auto;
    letter-spacing: 15rpx;
    margin-top: 200rpx;
    text-align: center;
  }
}

.u-form {
  margin: 60rpx 0;
  height: 300rpx;
  padding: 20rpx;

  .u-form-item {
    height: 150rpx;
  }
}

.u-button {
  border-radius: 100rpx;
}

.floot {
  margin-top: 30rpx;
  color: #ffffff;
  text-align: center;

  text {
    margin: 0 15rpx;
    font-size: 25rpx;
  }
}
.u-form-item__body {
  border: #ffffff 1px solid !important;
}

.btmImg {
  width: 100%;
  // height: 50rpx;
  position: fixed;
  bottom: -65px;
  left: -25%;
  image {
    width: 150%;
    // position: relative;
    // left: -30%;
  }
}
</style>
